<template>
  <PageLayout>
    <template #header>
      <BasicForm :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">意见反馈</div>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postFeedbackList"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'avatar'">
              <a-image
                class="custom-img"
                :width="50"
                :height="50"
                :src="record.avatar"
              />
            </template>
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="edit(record)">查看</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script setup>
import { postFeedbackList } from "@/api/common";
const router = useRouter();
const queryOptions = ref([
  {
    name: "手机号码",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "phone",
  },
  {
    name: "状态",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "status",
    list: [
      {
        label: "未处理",
        value: 0,
      },
      {
        label: "处理中",
        value: 1,
      },
      {
        label: "已处理",
        value: 2,
      },
    ],
    attrs: { allowClear: true },
  },
  {
    name: "反馈时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
]);
const columns = [
  {
    title: "意见反馈id",
    dataIndex: "id",
    key: "id",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "用户头像",
    dataIndex: "avatar",
    key: "avatar",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "用户名称",
    dataIndex: "nickname",
    key: "nickname",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "处理状态",
    dataIndex: "status",
    key: "status",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => `${record.status == 0 ? "未处理" : record.status == 1 ? "处理中" : '已处理'}`,
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "反馈时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  router.push({
    path: "/feedback/detail",
    query: {
      id: record?.id,
    },
  });
};

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped>
:deep(.custom-img) {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>
